<template>
    <div style="text-align:center">
        <div id='jiazai' style="display:block">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div id="xianshi" style="display:none">
            text1/text1我是demo1啊
            <button >Slide</button>
        </div>        
    </div>
</template>
<script>
export default {
    mounted () {
        document.querySelector('#jiazai').style.display='none'
        document.querySelector('#xianshi').style.display='block'
    }
}
</script>
<style>
    button {
        z-index: 1;
        position: relative;
        font-size: inherit;
        font-family: inherit;
        color: white;
        padding: 0.5em 1em;
        outline: none;
        border: none;
        background-color: hsl(236, 32%, 26%);
        }

        button::before {
        content: '';
        z-index: -1;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fc2f70;
        transform-origin: center bottom;
        transform: scaleY(0);
        transition: transform 0.25s ease-in-out;
        }

        button:hover {
        cursor: pointer;
        }

        button:hover::before {
        transform-origin: center top;
        transform: scaleY(1);
        }

        #jiazai {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: space-between;
            width: 2em;
            margin:0 auto;
            }

            span {
            width: 0.3em;
            height: 1em;
            background-color: #3cefff;
            }

            span:nth-of-type(1) {
            animation: grow 1s -0.45s ease-in-out infinite;
            }

            span:nth-of-type(2) {
            animation: grow 1s -0.3s ease-in-out infinite;
            }

            span:nth-of-type(3) {
            animation: grow 1s -0.15s ease-in-out infinite;
            }

            span:nth-of-type(4) {
            animation: grow 1s ease-in-out infinite;
            }

            @keyframes grow {
            0%,
            100% {
                transform: scaleY(1);
            }

            50% {
                transform: scaleY(2);
            }
            }

</style>